<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
    <script src="../js/jquery-3.6.0.js"></script>
    <script src="../element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
</head>
<body>
<!--1. 准备一个容器-->
<div id="app">
    <!--准备顶部按钮-->
    <el-row type="flex" justify="left">
         <el-col  :span="4">
             <el-button type="primary" icon="el-icon-plus" @click="flag=true">添加</el-button>
             <!--编写添加按钮表单-->
             <el-dialog :visible.sync="flag" title="添加员工" @close="resetData">
                 <el-form
                    v-bind:model="newStaff"
                    v-bind:rules="ruleReg"
                    ref="staffData"
                 >
                     <!--编号-->
                    <el-form-item label="EMPNO" label-width="80px" prop="empno">
                        <el-input name="empno" v-model="newStaff.empno" prefix-icon="el-icon-user" placeholder="请输入员工编号"></el-input>
                    </el-form-item>

                     <!--姓名-->
                     <el-form-item label="ENAME" label-width="80px" prop="ename">
                         <el-input name="ename" v-model="newStaff.ename" prefix-icon="el-icon-user-solid" placeholder="请输入员工姓名"></el-input>
                     </el-form-item>

                     <!--职位-->
                     <el-form-item label="JOB" label-width="80px" prop="job">
                         <el-input name="job" v-model="newStaff.job" prefix-icon="el-icon-monitor" placeholder="请输入职位"></el-input>
                     </el-form-item>

                     <!--上司-->
                     <el-form-item label="MGR" label-width="80px" prop="mgr">
                         <el-input name="mgr" v-model="newStaff.mgr" prefix-icon="el-icon-user" placeholder="请输入上司编号"></el-input>
                     </el-form-item>

                     <!--入职时间-->
                     <el-form-item label="HIREDATE" label-width="80px" prop="hiredate">
                        <el-date-picker name="hiredate" placeholder="请输入入职时间" v-model="newStaff.hiredate"></el-date-picker>
                     </el-form-item>

                     <!--薪资-->
                     <el-form-item label="SAL" label-width="80px" prop="sal">
                         <el-input name="sal" v-model="newStaff.sal" prefix-icon="el-icon-money" placeholder="请输入薪资"></el-input>
                     </el-form-item>

                     <!--奖金-->
                     <el-form-item label="COMM" label-width="80px" prop="comm">
                         <el-input name="comm" v-model="newStaff.comm" prefix-icon="el-icon-money" placeholder="请输入奖金"></el-input>
                     </el-form-item>

                     <!--部门标号-->
                     <el-form-item label="DEPTNO" label-width="85px" prop="deptno">
                         <el-input name="deptno" v-model="newStaff.deptno" prefix-icon="el-icon-s-platform" placeholder="请输入部门编号"></el-input>
                     </el-form-item>

                     <!--提交取消按钮-->
                     <el-form-item>
                         <el-row type="flex" justify="center">
                             <el-button  type="success" icon="el-icon-check" @click="pushStaff">提交</el-button>
                             <el-button  type="danger" icon="el-icon-close" @click="resetData">取消</el-button>
                         </el-row>
                     </el-form-item>
                 </el-form>
             </el-dialog>

             <!--编辑表单-->
             <el-dialog :visible.sync="editFlag" title="编辑员工" @close="resetData1">
                 <el-form
                         v-bind:model="editData"
                         v-bind:rules="ruleReg"
                         ref="staffData1"
                 >
                     <!--编号-->
                     <el-form-item label="EMPNO" label-width="80px" prop="empno">
                         <el-input name="empno" v-model="editData.empno" prefix-icon="el-icon-user" placeholder="请输入员工编号"></el-input>
                     </el-form-item>

                     <!--姓名-->
                     <el-form-item label="ENAME" label-width="80px" prop="ename">
                         <el-input name="ename" v-model="editData.ename" prefix-icon="el-icon-user-solid" placeholder="请输入员工姓名"></el-input>
                     </el-form-item>

                     <!--职位-->
                     <el-form-item label="JOB" label-width="80px" prop="job">
                         <el-input name="job" v-model="editData.job" prefix-icon="el-icon-monitor" placeholder="请输入职位"></el-input>
                     </el-form-item>

                     <!--上司-->
                     <el-form-item label="MGR" label-width="80px" prop="mgr">
                         <el-input name="mgr" v-model="editData.mgr" prefix-icon="el-icon-user" placeholder="请输入上司编号"></el-input>
                     </el-form-item>

                     <!--入职时间-->
                     <el-form-item label="HIREDATE" label-width="80px" prop="hiredate">
                         <el-date-picker name="hiredate" placeholder="请输入入职时间" v-model="editData.hiredate"></el-date-picker>
                     </el-form-item>

                     <!--薪资-->
                     <el-form-item label="SAL" label-width="80px" prop="sal">
                         <el-input name="sal" v-model="editData.sal" prefix-icon="el-icon-money" placeholder="请输入薪资"></el-input>
                     </el-form-item>

                     <!--奖金-->
                     <el-form-item label="COMM" label-width="80px" prop="comm">
                         <el-input name="comm" v-model="editData.comm" prefix-icon="el-icon-money" placeholder="请输入奖金"></el-input>
                     </el-form-item>

                     <!--部门标号-->
                     <el-form-item label="DEPTNO" label-width="85px" prop="deptno">
                         <el-input name="deptno" v-model="editData.deptno" prefix-icon="el-icon-s-platform" placeholder="请输入部门编号"></el-input>
                     </el-form-item>

                     <!--提交取消按钮-->
                     <el-form-item>
                         <el-row type="flex" justify="center">
                             <el-button  type="success" icon="el-icon-check" @click="editStaff">修改</el-button>
                             <el-button  type="danger" icon="el-icon-close" @click="resetData1">取消</el-button>
                         </el-row>
                     </el-form-item>
                 </el-form>
             </el-dialog>

             <!--批量删除按钮-->
             <el-button type="danger" icon="el-icon-delete" @click="multiplyStaff">批量删除</el-button>
         </el-col>
        <el-col :span="6">
            <el-input type="text" v-model="selectData" placeholder="请输入查询关键字">
                <el-button slot="append" type="info" icon="el-icon-search" @click="searchStaff">搜索</el-button>
                <el-select v-model="selectType" slot="prepend">
                    <el-option label="编号" value="1"></el-option>
                    <el-option label="姓名" value="2"></el-option>
                    <el-option label="部门号" value="3"></el-option>
                </el-select>
            </el-input>
        </el-col>

    </el-row>


    <!--准备表单-->
    <el-table
        v-bind:data="staffList"
        @select-all="selectAll"
        @select="selectOne"
    >
        <el-table-column type="selection" align="center"></el-table-column>
        <el-table-column label="NUMBER" align="center" type="index" width="100px"></el-table-column>
        <el-table-column label="EMPNO" align="center" prop="empno"></el-table-column>
        <el-table-column label="ENAME" align="center" prop="ename"></el-table-column>
        <el-table-column label="JOB" align="center" prop="job"></el-table-column>
        <el-table-column label="MGR" align="center" prop="mgr"></el-table-column>
        <el-table-column label="HIREDATE" align="center" prop="hiredate"></el-table-column>
        <el-table-column label="SAL" align="center" prop="sal"></el-table-column>
        <el-table-column label="COMM" align="center" prop="comm"></el-table-column>
        <el-table-column label="DEPTNO" align="center" prop="deptno"></el-table-column>
        <!--底部操作按钮-->
        <el-table-column label="操作" align="center" width="240px">
            <div slot-scope="scope">
                <el-button type="danger" icon="el-icon-delete" @click="deleteRow(scope.row)">删除</el-button>
                <el-button type="success" icon="el-icon-edit" @click="editStaffData(scope.row)">编辑</el-button>
            </div>
        </el-table-column>
    </el-table>

    <!--底部分页组件-->
    <el-pagination
            v-bind:total="total"
            v-bind:page-size="pageSize"
            v-bind:page-sizes="pageSizes"
            v-bind:current-page="pageNum"
            layout="total,prev,pager,next,jumper,sizes"
            @current-change="mth1"
            @size-change="mth2"
    >
    </el-pagination>
</div>
<script src="../js/员工信息表综合案例.js"></script>

</body>
</html>